//that = ''
// var that; // 可以这样声明变量 默认值是 undefined
class Tab {
    // that = ''; //不能写这里，这里应该也算实例变量，只能通过this.that调用

    constructor(id) {
        // console.log(that); // 默认值是 undefined
        // that = this;
        //获取元素
        this.main = document.querySelector(id);

        // 获取add按钮
        this.add = this.main.querySelector(".tabadd");
        // 获取父元素
        this.ul = this.main.querySelector(".fisrstnav ul:first-child"); // nav元素的第一个子元素
        this.fsection = this.main.querySelector(".tabscon");

        this.init();
    }

    init() {
        /**
         * 初始化：让相关的元素绑定事件
         *  li section + -
         */
        console.log('---init');
        this.update();
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i; //给每一个li元素绑定属性index
            // this.lis[i].onclick = function () {
            //     console.log(this);  // 这里的this指代的就是li元素
            //     console.log(this.index);
            // };
            this.lis[i].onclick = this.toggleTab.bind(this.lis[i],this); //点击时触发toggleTable
            this.remove[i].onclick = this.removeTab.bind(this.remove[i],this);  // 因为removeTab中需要用到自身的this,所有传递他自身过去不改变他的this指向，但同时传递that过去，使函数中的that等于对象
            this.spans[i].ondblclick = this.editTab;
            this.sections[i].ondblclick = this.editTab;
        }
        // add按钮绑定事件
        this.add.onclick = this.addTab.bind(this.add,this);
    }

    // 更新li元素和section元素remove icon，添加后重新获取
    // 动态的添加要动态的更新添加的元素
    update() {
        // 获取所有的Section
        this.sections = this.main.querySelectorAll("section");
        // 获取li列表
        this.lis = this.main.querySelectorAll("li");
        // 获取关闭按钮
        // css选择器 .class1 .class2 获取.class1 元素下包含.class2的元素
        // .class1.class2 获取同时包含.class1和.class2的元素
        this.remove = this.main.querySelectorAll(".iconfont.icon-guanbi");
        // 获取所有的文本span
        this.spans = this.main.querySelectorAll(".fisrstnav li span:first-child");
        // console.log(this.spans);
    }

    // 增加Tab
    addTab(that) {
        var random = Math.random();
        // 清楚其他所有的li和section样式
        that.clearClass();

        // 创建li元素和section元素
        var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>\n';
        var section = '<section class="conactive">测试' + random + '</section>';
        // 在父元素内的最后一个子元素后追加字符串HTML操作
        // doc: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML
        that.ul.insertAdjacentHTML("beforeend", li);
        that.fsection.insertAdjacentHTML("beforeend", section);
        that.init();
    }

    // 删除Tab
    removeTab(that,e) {
        e.stopPropagation(); //event可以通过参数传递过来
        //event.stopPropagation(); // 防止冒泡，避免出发父元素li的点击事件效果
        // 获取父元素的index
        var index = this.parentNode.index;
        // console.log(index);
        // 从元素列表中移除对应索引的 li和section
        that.lis[index].remove();
        that.sections[index].remove();
        // 重新获取元素，更新绑定事件
        that.init();
        // 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变
        if (document.querySelector('.liactive')) return;

        // 删除后自动设置前一个元素为绑定状态
        index--;
        //手动触发前一个li的点击事件
        // 逻辑运算符 lis[-1]时不执行操作
        // console.log(that.lis[-1]); // undefined
        that.lis[index] && that.lis[index].click()
    }

    // 切换tag
    toggleTab(that) {
        // 先清楚所有同级元素的class
        that.clearClass();
        // 改变lis的类 这里的this指代的是 li 元素
        this.className = "liactive";
        that.sections[this.index].className = 'conactive';
    }

    // 切换前首先清空class
    clearClass() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }

    // 编辑Tab
    editTab() {
        console.log('edit tab');
        var str = this.innerHTML; //获取原来的文字
        // 双击禁止选中文字
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        this.innerHTML = "<input type='text'/>";
        var input = this.children[0];
        input.value = str;
        input.select(); //使文字默认处于选中状态

        // 离开文本框时，讲修改的文字给span
        input.onblur = function () {
            this.parentNode.innerHTML = this.value; //因为是input调用的这个函数，所以这里的this就是input!!!
        };
        // 按下回车也可以把文本框里面的值给span
        input.onkeyup = function (e) {
            if (e.keyCode === 13) {  //keycode 13代表回车键
                // 手动调用表单失去焦点事件  不需要鼠标离开操作 !!!!!!
                this.blur();
            }
        }
    }
}

tab = new Tab("#tab");